<template>
  <a
    class="company-item-container"
    :style="{
      background: data.img ? `url(${data.img})` : '#aaa',
    }"
    :href="data.link || null"
  >
    <div class="title">
        <span>{{ data.title }}</span></div>
  </a>
</template>

<script>
export default {
  props: {
    data: {
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.company-item-container {
  width: 100%;
  height: 228px;
  display: flex;
  flex-direction: column-reverse;
  cursor: pointer;
  .title {
    width: 100%;
    height: 98px;
    position: relative;
    //   text-align: center;
    // padding-left: 10px;
    color: white;
    font-size: 15px;
    background: linear-gradient(
      180deg,
      #306cf105 0%,
      #306cf1e5 27%,
      #306cf1 100%
    );
    span {
        display: block;
        position: absolute;
        left: 10px;
        bottom: 20px;
    }
  }
}
</style>
